<template>
  <div class="">
    <div class="tabs_form">
      <el-form :inline="true" class="selectLabel">
        <el-form-item label="模块名称">
          <el-input
            v-model="queryReq.model"
            placeholder="请输入模块名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="queryReq.dateTime"
            type="daterange"
            align="right"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
        </el-form-item>
      </el-form>

      <div class="tabs_button">
        <el-form :inline="true" class="handleButton">
          <el-button
            type="primary"
            class="buttonLabel"
            @click="getWeeklySummaryQuery"
            >生成周总结</el-button
          >
          <el-button
            type="primary"
            class="buttonLabel"
            @click="getAnnualSummaryQuery"
            >生成年度总结</el-button
          >
        </el-form>
      </div>
    </div>

    <el-select
      v-model="queryReq.operatorType"
      placeholder="请选择计划类型"
      @change="changeOperatorType"
      class="tabs_select"
    >
      <el-option
        v-for="item in operatorTypeParams"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        default-first-option
      >
      </el-option>
    </el-select>

    <div class="tabs_table">
      <el-table :data="tableData" border style="width: 100%" max-height="600">
        <el-table-column
          prop="serialNo"
          label="序号"
          align="center"
          type="index"
          width="60"
        >
        </el-table-column>
        <el-table-column
          prop="model"
          label="模块"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="content"
          label="标题"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="contentDetail"
          label="详细标题"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="planStatus"
          label="状态"
          align="center"
          :formatter="planStatusFormatter"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="sumCount"
          label="总用时"
          align="center"
          :formatter="sumCountFormatter"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="planStartTime"
          label="计划开始时间"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="planEndTime"
          label="计划完成时间"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <el-table-column
          prop="startTime"
          label="实际开始时间"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="endTime"
          label="实际完成时间"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="230" align="center">
          <template v-slot="scope">
            <el-button
              type="primary"
              @click="cardReplacementMethod(scope.$index, scope.row, true)"
              plain
            >
              补卡</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <cardReplacement
      :cardReplacementVisible="cardReplacementVisible"
      @getCardReplacementConfig="getCardReplacementConfig"
      ref="cardReplacementRef"
    >
    </cardReplacement>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { getGroupDetail } from '@/api/config'
import {
  querySummaryReport,
  getWeeklySummary,
  getAnnualSummary,
} from '@/api/summaryReport'
import { selectDetail } from '@/constants/commonSelect'
import { rows } from './summaryReport'
import { getDateTime } from '@/components/util/dateTimeUtil'
import cardReplacement from './cardReplacement.vue'
import { ElMessageBox, ElMessage } from 'element-plus'

const operatorType = ref<number>(1)
const operatorTypeParams = ref<selectDetail[]>([])
const cardReplacementVisible = ref<boolean>(false)
const cardReplacementRef = ref<any>(null)

let queryReq = reactive({
  operatorType: 1,
  model: '',
  // 默认查询一个月的数据
  startTime: '',
  endTime: '',
  dateTime: [''],
})

const getDateTimes = () => {
  queryReq.dateTime = getDateTime()
}

let tableData = ref<rows[]>([])

// 初始化查询
onMounted(() => {
  getDateTimes()
  query()
  // 加载对应关系
  getOperatorType()
  getSelectPlanStatus()
})

const getAnnualSummaryQuery = () => {
  console.log('生成年度总结')
  getAnnualSummary(queryReq).then((res: any) => {
    // 处理返回的文件流
    const blob = res
    const fileName = '年度总结.xlsx'

    const link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.download = fileName
    document.body.appendChild(link)
    link.click()
    window.setTimeout(function () {
      window.URL.revokeObjectURL(blob)
      document.body.removeChild(link)
    }, 0)
  })
}

const getWeeklySummaryQuery = () => {
  console.log('生成周总结')
  getWeeklySummary(queryReq).then((res: any) => {
    // 处理返回的文件流
    const blob = res
    const fileName = '周总结.xlsx'

    const link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.download = fileName
    document.body.appendChild(link)
    link.click()
    window.setTimeout(function () {
      window.URL.revokeObjectURL(blob)
      document.body.removeChild(link)
    }, 0)
  })
}

const cardReplacementMethod = (index: number, row: any, status: boolean) => {
  ElMessageBox.confirm('补卡不算正常打卡，确认进行补卡操作吗?', 'Warning', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      getCardReplacementConfig(index, row, status)
      ElMessageBox.close()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消补卡',
      })
    })
}

const getCardReplacementConfig = (index: number, row: any, status: boolean) => {
  cardReplacementVisible.value = status
  cardReplacementRef.value?.initsObj(row)
  query()
}

const changeOperatorType = () => {
  query()
  operatorType.value = Number(queryReq.operatorType)
}

const getOperatorType = async () => {
  getGroupDetail('constgroup_operator_type').then((res: any) => {
    operatorTypeParams.value = res
  })
}

const query = async () => {
  querySummaryReport(queryReq).then((res: any) => {
    tableData.value = res.data.records
  })
}

const sumCountFormatter = (row: any) => {
  if (row.sumCount === null || row.sumCount === undefined) {
    return '0 h'
  }
  return row.sumCount + ' h'
}
const selectPlanStatus = ref<selectDetail[]>([])

const getSelectPlanStatus = async () => {
  getGroupDetail('constgroup_plan_status').then((res: any) => {
    selectPlanStatus.value = res
  })
}

const planStatusFormatter = (row: any) => {
  let result = ''
  selectPlanStatus.value.forEach((item: any) => {
    if (item.value === row.planStatus) {
      result = item.label
    }
  })

  return result
}
</script>

<style lang="scss" scoped>
.tabs_form {
  margin-top: 10px;
  position: relative;
}

.tabs_table {
  position: relative;
  margin-top: 20px;
}

.tabs_select {
  top: 0px;
  width: 200px;
  left: 40px;
}

.tabs_button {
  position: absolute;
  left: 300px;
  top: 0px;
}

.selectLabel {
  position: absolute;
  right: 30px;
}

.buttonLabel {
  margin-left: 10px;
  margin-bottom: 40px;
}
</style>
